<template>
    <view class="container">
        <custom-navbar title="懒人广场" @titleClick="scrollToTop"></custom-navbar>
        
        <scroll-view 
            class="main-content" 
            :style="{paddingTop: navbarTotalHeight + 'px'}"
            scroll-y="true"
            refresher-enabled="true"
            :refresher-triggered="refreshing"
            @refresherrefresh="onPullDownRefresh"
            @scrolltolower="onReachBottom"
            :scroll-with-animation="true"
            :scroll-top="scrollTop"
        >
            <!-- 帖子列表 -->
            <view class="posts-list">
                <view 
                    class="post-item" 
                    v-for="(post, index) in postsList" 
                    :key="index"
                    @tap="goToPostDetail(post)"
                >
                    <!-- 用户信息 -->
                    <view class="post-header">
                        <image class="user-avatar" :src="post.userAvatar" mode="aspectFit"></image>
                        <view class="user-info">
                            <text class="username">{{post.username}}</text>
                            <text class="post-time">{{post.createTime}}</text>
                        </view>
                    </view>
                    
                    <!-- 帖子内容 -->
                    <view class="post-content">
                        <text class="post-title">{{post.title}}</text>
                        <text class="post-desc" v-if="post.content">{{post.content}}</text>
                        
                        <!-- 图片 -->
                        <view class="post-images" v-if="post.images && post.images.length > 0">
                            <image 
                                class="post-image" 
                                v-for="(img, imgIndex) in post.images" 
                                :key="imgIndex"
                                :src="img" 
                                mode="aspectFill"
                                @tap.stop="previewImage(post.images, imgIndex)"
                            ></image>
                        </view>
                    </view>
                    
                    <!-- 互动区域 -->
                    <view class="post-actions">
                        <view class="action-item" @tap.stop="toggleLike(post, index)">
                            <image 
                                class="action-icon" 
                                :src="post.isLiked ? 'https://img.icons8.com/fluency/48/hearts.png' : 'https://img.icons8.com/ios/50/hearts.png'" 
                                mode="aspectFit"
                            ></image>
                            <text class="action-text" :class="{liked: post.isLiked}">{{post.likeCount}}</text>
                        </view>
                        
                        <view class="action-item">
                            <image class="action-icon" src="https://img.icons8.com/ios/50/speech-bubble.png" mode="aspectFit"></image>
                            <text class="action-text">{{post.commentCount}}</text>
                        </view>
                        
                        <view class="action-item" @tap.stop="sharePost(post)">
                            <image class="action-icon" src="https://img.icons8.com/ios/50/share.png" mode="aspectFit"></image>
                            <text class="action-text">分享</text>
                        </view>
                    </view>
                </view>
            </view>
            
            <!-- 加载更多 -->
            <view class="load-more" v-if="hasMore && postsList.length > 0">
                <text class="load-text">{{loadingText}}</text>
            </view>
            
            <!-- 空状态 -->
            <view class="empty-state" v-if="postsList.length === 0">
                <image class="empty-icon" src="https://img.icons8.com/fluency/96/no-comments.png" mode="aspectFit"></image>
                <text class="empty-text">暂无帖子</text>
                <text class="empty-desc">成为第一个发帖的人吧！</text>
                
               
                <view class="empty-btn" @tap="goToCreatePost">
                    <image class="empty-btn-icon" src="https://img.icons8.com/fluency/48/plus.png" mode="aspectFit"></image>
                    <text class="empty-btn-text">发布第一篇帖子</text>
                </view>
            </view>
        </scroll-view>


        <!-- 自定义底部导航栏 -->
        <custom-tabbar :current="1" @switch="onTabSwitch"></custom-tabbar>
    </view>
</template>

<script>
import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue';
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue';

export default {
    components: {
        CustomNavbar,
        CustomTabbar
    },
    data() {
        return {
            navbarTotalHeight: 132,
            statusBarHeight: 44,
            safeAreaBottom: 0,
            showFabMenu: false,
            refreshing: false, // 控制下拉刷新状态
            isLoading: false, // 控制上拉加载状态
            scrollTop: 0, // 控制滚动位置
            hasMore: true, // 是否还有更多数据
            loadingText: '上拉加载更多', // 加载提示文字
            postsList: [
                {
                    id: 1,
                    username: '影视迷',
                    userAvatar: 'https://img.icons8.com/fluency/48/user.png',
                    createTime: '2小时前',
                    title: '最近看了一部超好看的电影！',
                    content: '强烈推荐《肥龙过江》，剧情紧凑，演员演技在线，真的是一部不可多得的好作品！',
                    images: ['https://img.icons8.com/fluency/96/movie.png'],
                    likeCount: 24,
                    commentCount: 8,
                    isLiked: false
                },
                {
                    id: 2,
                    username: '懒人小白',
                    userAvatar: 'https://img.icons8.com/fluency/48/person.png',
                    createTime: '5小时前',
                    title: '有什么好看的综艺推荐吗？',
                    content: '最近剧荒了，想找些轻松有趣的综艺看看，大家有什么好的推荐吗？',
                    images: [],
                    likeCount: 12,
                    commentCount: 15,
                    isLiked: true
                },
                {
                    id: 3,
                    username: '电影发烧友',
                    userAvatar: 'https://img.icons8.com/fluency/48/user-male.png',
                    createTime: '1天前',
                    title: '分享一些经典电影截图',
                    content: '整理了一些经典电影的经典镜头，每一帧都可以做壁纸！',
                    images: [
                        'https://img.icons8.com/fluency/96/film-reel.png',
                        'https://img.icons8.com/fluency/96/camera.png'
                    ],
                    likeCount: 56,
                    commentCount: 23,
                    isLiked: false
                }
            ]
        }
    },
    computed: {
        // 可以添加一些计算属性
    },
    mounted() {
        const systemInfo = uni.getSystemInfoSync();
        this.statusBarHeight = systemInfo.statusBarHeight || 44;
        this.navbarTotalHeight = this.statusBarHeight + 44;
        this.safeAreaBottom = systemInfo.safeAreaInsets ? systemInfo.safeAreaInsets.bottom : 0;
        
        // 初始化加载数据
        this.loadPostsData();
    },
    methods: {
        // 下拉刷新
        onPullDownRefresh() {
            this.refreshing = true;
            setTimeout(() => {
                this.loadPostsData();
                this.refreshing = false;
                uni.showToast({
                    title: '刷新成功',
                    icon: 'success',
                    duration: 1000
                });
            }, 1500);
        },
        
        // 加载帖子数据
        loadPostsData() {
            // 模拟新增帖子
            const newPosts = [
                {
                    id: Date.now(),
                    username: '新用户',
                    userAvatar: 'https://img.icons8.com/fluency/48/person.png',
                    createTime: '刚刚',
                    title: '新鲜出炉的帖子！',
                    content: '这是一个刚刚发布的新帖子，希望大家喜欢！',
                    images: ['https://img.icons8.com/fluency/96/new.png'],
                    likeCount: 0,
                    commentCount: 0,
                    isLiked: false
                }
            ];
            
            // 更新时间并添加到列表首部
            this.postsList.forEach(post => {
                if (post.createTime === '刚刚') {
                    post.createTime = '几分钟前';
                }
            });
            
            this.postsList = [...newPosts, ...this.postsList];
        },
        
        // 上拉加载更多
        onReachBottom() {
            if (this.isLoading || !this.hasMore) {
                return;
            }
            
            this.isLoading = true;
            this.loadingText = '加载中...';
            
            // 模拟网络请求延迟
            setTimeout(() => {
                this.loadMorePosts();
                this.isLoading = false;
                this.loadingText = '上拉加载更多';
            }, 500);
        },
        
        // 加载更多帖子
        loadMorePosts() {
            // 模拟加载更多数据
            const morePosts = [
                {
                    id: Date.now() + Math.random(),
                    username: '电影爱好者',
                    userAvatar: 'https://img.icons8.com/fluency/48/user-male.png',
                    createTime: '10分钟前',
                    title: '分享一部经典电影',
                    content: '最近重新看了《教父》，依然觉得震撼，这就是经典的力量。',
                    images: ['https://img.icons8.com/fluency/96/movie.png'],
                    likeCount: 15,
                    commentCount: 6,
                    isLiked: false
                },
                {
                    id: Date.now() + Math.random() + 1,
                    username: '音乐发烧友',
                    userAvatar: 'https://img.icons8.com/fluency/48/person.png',
                    createTime: '15分钟前',
                    title: '推荐几首好听的歌',
                    content: '最近听到一些非常棒的歌曲，分享给大家，希望你们也会喜欢。',
                    images: [],
                    likeCount: 8,
                    commentCount: 12,
                    isLiked: false
                },
                {
                    id: Date.now() + Math.random() + 2,
                    username: '旅行者',
                    userAvatar: 'https://img.icons8.com/fluency/48/user.png',
                    createTime: '20分钟前',
                    title: '旅行摄影分享',
                    content: '刚从云南旅行回来，拍了很多美景，分享给大家看看。',
                    images: [
                        'https://img.icons8.com/fluency/96/camera.png',
                        'https://img.icons8.com/fluency/96/landscape.png'
                    ],
                    likeCount: 32,
                    commentCount: 18,
                    isLiked: true
                }
            ];
            
            // 模拟分页加载，假设加载3次后没有更多数据
            if (this.postsList.length >= 9) {
                this.hasMore = false;
                this.loadingText = '没有更多内容了';
                return;
            }
            
            this.postsList = [...this.postsList, ...morePosts];
        },
        
        // 跳转到发帖页面
        goToCreatePost() {
            this.showFabMenu = false;
            uni.navigateTo({
                url: '/pages/create-post/create-post'
            });
        },
        
        // 跳转到共同建站页面
        goToCreateSite() {
            this.showFabMenu = false;
            uni.navigateTo({
                url: '/pages/create-site/create-site'
            });
        },
        
        // 预览图片
        previewImage(images, current) {
            uni.previewImage({
                current: current,
                urls: images
            });
        },
        
        // 点赞/取消点赞
        toggleLike(post, index) {
            if (post.isLiked) {
                post.likeCount--;
                post.isLiked = false;
            } else {
                post.likeCount++;
                post.isLiked = true;
            }
            
            // 更新列表
            this.$set(this.postsList, index, post);
        },
        
        // 分享帖子
        sharePost(post) {
            uni.showActionSheet({
                itemList: ['微信分享', '朋友圈分享', '复制链接'],
                success: (res) => {
                    const actions = ['微信分享', '朋友圈分享', '复制链接'];
                    uni.showToast({
                        title: actions[res.tapIndex],
                        icon: 'none'
                    });
                }
            });
        },
        
        // 跳转到帖子详情
        goToPostDetail(post) {
            uni.navigateTo({
                url: `/pages/post-detail/post-detail?postId=${post.id}`
            });
        },
        
        onTabSwitch(event) {
            console.log('Tab切换:', event);
        },
        // 滚动到顶部
        scrollToTop() {
            // 方法1：使用scroll-top属性
            this.scrollTop = this.scrollTop === 0 ? 1 : 0;
            
            // 添加触觉反馈
            uni.vibrateShort({
                type: 'light'
            });
            
            // 显示提示
            // uni.showToast({
            //     title: '已回到顶部',
            //     icon: 'none',
            //     duration: 1000
            // });
        }
    }
}
</script>

<style scoped>
.container {
    background-color: #f5f5f5;
    min-height: 100vh;
}

.main-content {
    height: calc(100vh - 132rpx - 120rpx); /* 减去导航栏和tabBar高度 */
    padding: 20rpx;
    padding-bottom: 140rpx;
}

/* 帖子列表 */
.posts-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.post-item {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.post-item:active {
    transform: scale(0.98);
}

/* 帖子头部 */
.post-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
}

.user-avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}

.user-info {
    flex: 1;
}

.username {
    display: block;
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 5rpx;
}

.post-time {
    display: block;
    font-size: 22rpx;
    color: #999;
}

/* 帖子内容 */
.post-content {
    margin-bottom: 20rpx;
}

.post-title {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 15rpx;
    line-height: 1.4;
}

.post-desc {
    display: block;
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20rpx;
}

/* 帖子图片 */
.post-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;
    margin-bottom: 10rpx;
}

.post-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
    background: #f8f9fa;
}

/* 互动区域 */
.post-actions {
    display: flex;
    align-items: center;
    gap: 40rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid #f5f5f5;
}

.action-item {
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.action-item:active {
    transform: scale(0.95);
}

.action-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
    opacity: 0.7;
}

.action-text {
    font-size: 24rpx;
    color: #999;
    transition: all 0.3s ease;
}

.action-text.liked {
    color: #ff6b35;
    font-weight: bold;
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 100rpx 40rpx;
}

.empty-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 30rpx;
    opacity: 0.6;
}

.empty-text {
    display: block;
    font-size: 32rpx;
    color: #666;
    margin-bottom: 15rpx;
}

.empty-desc {
    display: block;
    font-size: 28rpx;
    color: #999;
    margin-bottom: 40rpx;
}



.empty-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50rpx;
    padding: 25rpx 40rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    min-width: 200rpx;
    justify-content: center;
}

.empty-btn:active {
    transform: scale(0.95);
}

.empty-btn-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 15rpx;
}

.empty-btn-text {
    color: #ffffff;
    font-size: 28rpx;
    font-weight: bold;
}

/* 加载更多 */
.load-more {
    text-align: center;
    padding: 40rpx;
}

.load-text {
    color: #999;
    font-size: 28rpx;
}


</style>